<template>
	<view>
		<scroll-view scroll-y="true" :style="{height: height+'vh'}" @scrolltolower="reachBottom">
			<view class="listBox" :class="isPop&&'popList'" v-if="list.length>0">
				<view class="pd30 item" :class="(isPop||isAddList)&&'isPop'" v-for="(i,idx) in list">
					<view class="title df">
						{{i.interaction_name}}
						<view v-show="!isPop&&!isAddList" class="delete" @click="edit(i.id)"
							style="font-weight: 500;border: 1px solid #6a97eb;font-size: 28rpx;">
							编辑
						</view>
					</view>

					<view class="mt20 df">
						<view class="imgBox dfx alc over-hidden">
							<view class="bg1">
								形象
							</view>
							<view class="dfx alc bg2">
								<image src="@/static/img/openLive/u1.png" style="width: 26rpx;height: 26rpx;" mode=""></image>
								{{i.image}}
							</view>
						</view>
						<view class="fs26 info">
							话术数量：{{i.videvo_ids_num}}
						</view>
					</view>

					<view class="dfx fs26 info">
						<text class="fs28" style="width: 18%;">关键词</text>
						<view class="dfx wrap">
							<view class="keyBox" style="color: #565656;" v-for="(item,index) in i.keywords">
								{{item}}
							</view>
						</view>
					</view>

					<view class="df">
						<view class="time">
							{{i.create_time}}
						</view>
						<view v-show="!isPop&&!isAddList" class="gray delete" @click="del(i.id)">
							删除
						</view>
						<view v-show="isAddList" class="gray delete" @click="remove(idx)">
							移除
						</view>
						<view v-show="isPop" class="primary delete" @click="choose(i)">
							选择方案
						</view>
					</view>
				</view>
			</view>
			<!-- 内容为空 -->
			<empty v-else></empty>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		name: "interaction",
		props: {
			liveList: {
				type: Array,
				default: []
			},
			height: {
				type: Number,
				default: 76
			},
			isPop: {
				type: Boolean,
				default: false
			},
			isAddList: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				list: [],
				formInline: {
					page: 1,
					limit: 10,
					total: 0
				},
			};
		},
		watch: {
			// liveList(newVal) {
			// 	console.log('interaction', newVal);
			// 	if (newVal.length > 0) {
			// 		this.list = newVal
			// 	}
			// },

			liveList: {
				handler(newVal) {
					// console.log('cutt', newVal);
					// if (newVal.length > 0) {
					this.list = newVal
					this.$forceUpdate()
					// }
				},
				immediate: true
			}

		},
		onLoad() {
			// this.getData()
		},
		methods: {
			reachBottom() {
				this.$emit('getData')
				return
				console.log(111);
				if (this.formInline.total > this.livelist.length) {
					this.formInline.page++
					this.getData();
				}
			},
			getData() {
				let params = {
					...this.formInline
				}
				if (this.id) params.explain_id = this.id
				this.$api.interactList(params).then(res => {
					if (res.code == 200) {
						if (this.formInline.page == 1) {
							this.list = res.data.list
						} else {
							this.list = this.list.concat(res.data.list)
						}
						this.formInline.total = res.data.count
					} else {
						this.$tools.toast(res.msg);
					}
				})
			},
			edit(id) {
				this.$emit('edit', id)
			},
			remove(i) {
				this.$emit('remove', i)
			},
			choose(i) {
				this.$emit('choose', i)
			},
			del(id) {
				uni.showLoading({
					title: '删除中'
				})
				this.$api.del({
					interaction_id: id
				}).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						this.$emit('getData', 0)
					} else {
						this.$tools.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popList {
		overflow: hidden;
		margin-top: 16rpx;
		border-radius: 16rpx;
		box-shadow: 1px 2px 10px #c5d7f2;
	}

	.listBox {
		margin: 30rpx;
		margin-top: 10rpx;
		font-size: 15px;

		.aList {
			max-height: 30vh;
		}

		.primary {
			color: #2979ff !important;
			background: #ecf5ff !important;
		}

		.gray {
			color: #9a9998 !important;
			background: #f0f0f0 !important;
		}

		.isPop {
			box-shadow: none !important;
			margin-bottom: 0rpx !important;
			border-radius: 0rpx !important;
			border-bottom: 4rpx solid #edf4fe;
		}

		.isPop:last-child {
			border-bottom: 0px !important;
		}

		.item {
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			justify-content: space-between;
			align-items: center;
			// box-shadow:1px 2px 10px #6395f2;
			box-shadow: 1px 2px 10px rgba(20, 111, 255, 0.09);


			.title {
				font-weight: 700;
				font-size: 32rpx;
				color: #254680;
			}

			.imgBox {
				width: 96px;
				height: 26px;
				font-size: 26rpx;
				font-weight: 600;
				border-radius: 14rpx;
				background: #EAF3FE;

				.bg1 {
					width: 74rpx;
					height: 52rpx;
					line-height: 52rpx;
					border-radius: 14rpx 0px 14rpx 14rpx;
					background: #3385FF;
					color: #fff;
					text-align: center;
				}

				.bg2 {
					padding: 0 14rpx;
					color: #254680;
				}
			}

			.box {
				justify-content: space-between;
				align-items: center;
			}

			.info {
				margin-top: 16rpx;
				line-height: 48rpx;
				font-weight: 600;
				color: #A6A6A6;

				.keyBox {
					color: #565656;
					padding: 0 12rpx;
					background: #FAFAFA;
					margin-right: 10rpx;
					margin-bottom: 10rpx;
					border-radius: 16rpx;
					border: 1px solid #E6E6E6;
				}

				.keyBox:last-child {
					margin-right: 0rpx;
				}
			}

			.time {
				color: #A6A6A6;
				letter-spacing: .5px;
			}

			.delete {
				padding: 10rpx 24rpx;
				// height: 24px;
				// line-height: 48rpx;
				color: #6a97eb;
				font-size: 26rpx;
				text-align: center;
				background: #f5f9ff;
				border-radius: 32rpx;
			}

			.edit {
				transform: rotate(90deg);
			}

			.item1 {
				background: #6a8bff;
				padding: 20rpx;
				margin-top: 35rpx;
			}


		}

		// .item:last-child {
		// 	margin-bottom: 0;
		// }
	}
</style>